<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enjoying</title>

    <link rel="stylesheet" href="css/view.css">
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/common.js"></script>
    <script>

        var ID = getParameter("id");
        var COUNT_SHOW = 0;
        var MAX_SHOW = getParameter("pageSize");
        var IMG_HTML_ARR = [];

        function auto_showImg() {
            // if (COUNT_SHOW <= 5) {
            showImg();
            // }
        }

        function showImg() {
            if (MAX_SHOW > COUNT_SHOW) {
                $(".container .main").append(IMG_HTML_ARR[COUNT_SHOW++]);
            }
        }

        // function scrollBottomOrTop() {
        //     var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        //     var scrollTop = document.documentElement.scrollTop;
        //     var wholeHeight = document.documentElement.scrollHeight;
        //     if (clients + scrollTop >= wholeHeight - 16) {
        //         // 靠近底部
        //         showImg();
        //     }
        //     if (scrollTop === 0) {
        //         // 顶部
        //     }
        // }

        function getImagesList() {
            for (let i = 1; i <= MAX_SHOW; i++) {
                IMG_HTML_ARR[i - 1] = '<img onload="auto_showImg();" src="s/image/' + ID + '/page/' + i + '">';
            }
            showImg();
        }

        $(function () {
            getImagesList();
        });
    </script>
</head>

<body>
<!--<div class="show-height"></div>-->
<div class="container">
    <div class="main">

    </div>
</div>
<!-- <button class="btn-top" onclick="location.href='#'">Top</button> -->
</body>

</html>